<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html{
            height: 100%;
            padding:0;
            margin:0;
        }
        .mask{
            display:none;
            width: 100%;
            height: 100%;
            position:fixed;
            top:0;
            left:0;
            background: rgba(64, 14, 49, 0.5);
        }
        .login{

            width: 400px;
            height: 300px;
            cursor:pointer;
            background-color:#fff;
            margin:200px auto;
        }
        a{
            display: inline-block;
            padding:20px;
            text-decoration:none;
            font:20px/30px microsoft yahei;
            color:orange;
        }
    </style>
</head>
<body>
<div class="mask">
    <div class="login" id="login"></div>
</div>
<a href="#">注册</a>
<a href="#">登录</a>
<script>
    function show(ele){
        ele.style.display="block";
    }
    //点击登录按钮显示模态框，点击除去login以外的所有盒子隐藏模态框
    var mask=document.getElementsByClassName("mask")[0];
    var a=document.getElementsByTagName("a")[1];
    a.onclick=function(ev){
        ev=ev||event;
        show(mask);
        //阻止冒泡
        //火狐、谷歌、IE9+
        if(ev&&ev.stopPropagation){
            ev.stopPropagation();
        }else{
            //IE678
            ev.cancelBubble=true;
        }
    }
    document.onclick=function(ev){
        ev=ev||event;
        var aaa=ev.target||ev.srcElement;
        aaa.id==="login"?show(mask):mask.style.display="none";
    }
</script>
</body>
</html>